<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2015/6/3
 * Time: 10:16
 */
session_start();
@$totalview = file_get_contents('total.php');
if($totalview){
    @$totalview = intval($totalview) + 1;
    @file_put_contents('total.php', $totalview);
}

/*
 * 经典的概率算法，
 * $proArr是一个预先设置的数组，
 * 假设数组为：array(100,200,300，400)，
 * 开始是从1,1000 这个概率范围内筛选第一个数是否在他的出现概率范围之内，
 * 如果不在，则将概率空间，也就是k的值减去刚刚的那个数字的概率空间，
 * 在本例当中就是减去100，也就是说第二个数是在1，900这个范围内筛选的。
 * 这样 筛选到最终，总会有一个数满足要求。
 * 就相当于去一个箱子里摸东西，
 * 第一个不是，第二个不是，第三个还不是，那最后一个一定是。
 * 这个算法简单，而且效率非常 高，
 * 关键是这个算法已在我们以前的项目中有应用，尤其是大数据量的项目中效率非常棒。
 */
function get_rand($proArr) {
    $result = '';
    //概率数组的总概率精度
    $proSum = array_sum($proArr);
    //概率数组循环
    foreach ($proArr as $key => $proCur) {
        $randNum = mt_rand(1, $proSum);
        if ($randNum <= $proCur) {
            $result = $key;
            break;
        } else {
            $proSum -= $proCur;
        }
    }
    unset ($proArr);
    return $result;
}


/*
 * 奖项数组
 * 是一个二维数组，记录了所有本次抽奖的奖项信息，
 * 其中id表示中奖等级，prize表示奖品，v表示中奖概率。
 * 注意其中的v必须为整数，你可以将对应的 奖项的v设置成0，即意味着该奖项抽中的几率是0，
 * 数组中v的总和（基数），基数越大越能体现概率的准确性。
 * 本例中v的总和为100，那么平板电脑对应的 中奖概率就是1%，
 * 如果v的总和是10000，那中奖概率就是万分之一了。
 *
 */
$prize_arr = array(
    '0' => array('id'=>1,'prize'=>'10000积分','v'=>1),
    '1' => array('id'=>2,'prize'=>'3000积分','v'=>10),
    '2' => array('id'=>3,'prize'=>'1000积分','v'=>30),
    '3' => array('id'=>4,'prize'=>'500积分','v'=>50),
    '4' => array('id'=>5,'prize'=>'200积分','v'=>100),
    '5' => array('id'=>6,'prize'=>'下次没准就能中哦','v'=>200),
);

/*
 * 每次前端页面的请求，PHP循环奖项设置数组，
 * 通过概率计算函数get_rand获取抽中的奖项id。
 * 将中奖奖品保存在数组$res['yes']中，
 * 而剩下的未中奖的信息保存在$res['no']中，
 * 最后输出json个数数据给前端页面。
 */
foreach ($prize_arr as $key => $val) {
    $arr[$val['id']] = $val['v'];
}
$rid = get_rand($arr); //根据概率获取奖项id

$res['yes'] = $prize_arr[$rid-1]['prize']; //中奖项
//unset($prize_arr[$rid-1]); //将中奖项从数组中剔除，剩下未中奖项
//shuffle($prize_arr); //打乱数组顺序
//for($i=0;$i<count($prize_arr);$i++){
//    $pr[] = $prize_arr[$i]['prize'];
//}
//$res['no'] = $pr;
$_SESSION['res'] = $res['yes'];

$img = 'static/yes'.($rid-1).'.jpg?008';

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>逍遥掌旅宝，争当火炬手！</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Expires" content="-1">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <link href="./static/Wap.css" rel="stylesheet" type="text/css">
    <script src="./static/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="./static/layer.m.js" type="text/javascript"></script><link href="./static/layer.css" type="text/css" rel="styleSheet" id="layermcss">
    <script language="javascript" type="text/javascript">

    </script>
    <style type="text/css">
        * { margin: 0; padding: 0; list-style-type: none; }
        a, img { border: 0; outline: none; }
        body { position: relative; background: url(static/7.jpg) no-repeat 0 0;overflow: hidden;
            background-size: 100% auto;
            height: 100vh;
            width: 100vw;padding-top:20%}
        .tishi{padding-top:8px}
        #bg2 {width:100%;max-width:430px; margin: 0 auto; text-align:center}
        #bg2 img{width:100px;}
        #gua1 { width: 295px; margin: 0 auto; }
        #notify { width:100%;max-width:430px;  margin: 0 auto; }
        #nImg_div { position: absolute; color: white; font-size: 17px; font-family: '黑体'; }
        #nImg_div div { width: 245px; height: 101px; padding: 10px 0px 0px 50px; }
        #di { width: 295px; margin: 0 auto; }
        #bg1 { display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.7; opacity: .70; filter: alpha(opacity=70); }
        #show { display: none; position: absolute; top: 222px; left: 50%; margin-left: -148px; text-align: center; background-color: #fff; z-index: 1002; overflow: auto; }
        #show div { margin-top: -145px; margin-left: 40px; padding-right: 40px; line-height: 1.5; color: #000000; font-size: 17px; font-family: '黑体'; }
        #anniou{max-width:430px; margin: 0 auto;height:80px;background:#13AEA6;padding-top:10px;}
        #anniou .annl{width:50%;text-align:center;float:left}
        #anniou img{max-width:150px;}
        #anniou a{boder:0}
        #anniou .annr{width:50%;text-align:center;float:right}
    </style>
</head>
<body>
<!--    <div id="bg2">-->
<!--        <img id="bg2_img" src="./static/guaguakaka.png" width="100%">-->
<!--    </div>-->
    <div id="gua1" style="margin-top:20px;">
        <img id="gua1_img" src="./static/gua_image.png" style="position: absolute; width: 300px; height: 160px;">
        <canvas id="front" style="position: absolute; margin-top: 9.3px; margin-left: 7.5px; background-image: url(<?php echo $img?>);" width="285" height="141">
        </canvas>
    </div>
<!--    <div id="notify" style="margin-top: 200px;">-->
<!--        <img id="nImg" src="./static/jiangxiangxxxx.png" style="width:100%;">-->
<!--    </div>-->
    <script language="javascript" type="text/javascript">
        var gua = 1, re = 2;
        var imgSrc = '<?php echo $img?>';
        var cj;
        $(function () {

            var width = $("#show_img").width();
            var height = $("#show_img").height();
            var winheight = $(window).height();
            var winwidth = $(window).width();
            $("#show").css({ "width": 300 + "px", "height": 160 + "px", "overflow": "hidden" });
            $("#show_btn").css({ "width": 176 * 0.5 + "px", "height": 76 * 0.5 + "px" });
            $("#gua_div").html("x" + gua);
            $("#re_div").html("x" + re);

            if (gua == 0) {
                CJOver();
            }


        });
        function ShowErr(msg) {
            $("#err_f").css("display", "block"); $("#err_f").html(msg);
            setTimeout("HidErr()", 3000);
        }
        function HidErr() {
            $("#err_f").css("display", "none");
        }
        function CJOver() {
            layer.open({
                content: '您今天抽奖机会已经用完，请明天再来！', shadeClose: false,
                btn: ['确定'],
                shadeClose: false,
                yes: function () {
                }
            });
        }
        function CJLoad() {
            var cj = layer.open({
                content: '<div id="err_f"></div><div class="hjcjop">手机号码：<input type="text" id="inpsj"/><div class="tishi">掌旅宝网络科技有限公司友情提醒：手机号码仅作为兑奖凭证，请准确填写。</div></div>',
                btn: ['立即提交'],
                shadeClose: false,
                yes: function () {
                    //验证
                    var sj = $("#inpsj").val();
                    var mob = /^0?(13[0-9]|15[012356789]|18[0123456789]|14[57])[0-9]{8}$/;
                    if ($.trim(sj) == "") { ShowErr("请输入手机号码"); return; }
                    if (!mob.test($.trim(sj))) {
                        ShowErr("输入的手机号码有误"); return;
                    }
                    //提交
                    if ($("#hgo").val() == "0") {
                        $("#hgo").val("1");
                        $.ajax({
                            method:'post', url:"save.php", data:{mobile: sj },async:true, success:function (data) {
                                if (data == "ok") {
                                    layer.close(cj);
                                } else if (data == "has") {
                                    $("#hgo").val("0");
                                    ShowErr("该号码今天已经参与过抽奖，请明天再来！");
                                    return;
                                }
                            }
                        });
                    }
                }
            });
        }
        $("img").load(function () {
            var body_width = $(window).width();
            var body_height = $(window).height();
            $("#gua1_img").width(300).height(160);
            var height = 141;
            var width = 285;
            var bg2_width = $("#bg2_img").width();
            var bg2_height = $("#bg2_img").height();

            $("#gua1").css({ "margin-top": "20px" });

            $("#notify").css({ "margin-top": "200px" });


            $("#di").css({ "margin-top": "50px" });
            $("#di_img").width(414 * 0.7).height(24 * 0.7);


            $("#gua").width(width / 10).height(width / 10);
            $("#gua_div").css({ "line-height": width / 10 + "px", "width": width / 10 + "px", "height": width / 10 + "px", "margin-top": "-" + ($("#gua").height()) + "px", "margin-left": $("#gua").height() + 5 + "px", "font-size": $("#gua").height() / 1.6 + "px" });
            $("#re").width(width / 10).height(width / 10);
            $("#re_div").css({ "line-height": width / 10 + "px", "width": width / 10 + "px", "height": width / 10 + "px", "margin-top": "-" + ($("#gua").height()) + "px", "margin-left": $("#gua").height() + 5 + "px", "font-size": $("#gua").height() / 1.6 + "px" });
            var gua1_img_width = $("#gua1_img").width();
            $("#front").css({ "margin-top": 9.3 + "px", "margin-left": 7.5 + "px" });
            if (gua > 0) {
                bodys(height, width);
            }
        });
        function bodys(height, width) {
            var img = new Image();
            var canvas = document.querySelector('canvas');
            canvas.style.position = 'absolute';
            img.addEventListener('load', function (e) {
                var ctx;
                var w = width, h = height;
                var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop;
                var mousedown = false;
                function layer(ctx) {
                    ctx.fillStyle = 'gray';
                    ctx.fillRect(0, 0, w, h);
                }
                function eventDown(e) {
                    e.preventDefault();
                    mousedown = true;
                }
                function eventUp(e) {
                    e.preventDefault();
                    mousedown = false;
                }
                function eventMove(e) {
                    e.preventDefault();
                    if (mousedown) {
                        if (e.changedTouches) {
                            e = e.changedTouches[e.changedTouches.length - 1];
                        }
                        var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
                            y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
                        with (ctx) {
                            beginPath()
                            arc(x, y, 15, 0, Math.PI * 2);
                            fill();
                        }
                    }
                }
                canvas.width = w;
                canvas.height = h;

                canvas.style.backgroundImage = 'url(' + img.src + ')';
                ctx = canvas.getContext('2d');
                ctx.fillStyle = 'b9b9b9';
                ctx.fillRect(0, 0, w, h);

                layer(ctx);
                ctx.globalCompositeOperation = 'destination-out';
                canvas.addEventListener('touchstart', eventDown);
                canvas.addEventListener('touchend', eventUp);
                canvas.addEventListener('touchmove', eventMove);
                canvas.addEventListener('mousedown', eventDown);
                canvas.addEventListener('mouseup', eventUp);
                canvas.addEventListener('mousemove', eventMove);
            });

            img.src = imgSrc;
            (document.body.style);
        }
    </script>
    <input id="hgo" value="0" type="hidden">


<script type="text/javascript">
CJLoad();
</script>


</body></html>